<template>
  <div class="goods" @mouseover="enter()" @mouseout="leave()">
    <div class="goods-top">
      <img class="goods-img" v-lazy="item.skuImage" :key="item.skuImage"/>
      <!-- 热推 查看详情 -->
      <div class="goods-rt" v-if="itemHover">
        <div class="goods-rt-item">{{item.spreadNum}}人热推中</div>
        <div class="goods-rt-line"></div>
        <div class="goods-rt-item">查看详情</div>
      </div>
      <!-- 标签 -->
      <div class="goods-tip"  @click.stop="jump(item.id)">
        <template v-if="!itemHover">
          <div class="goods-tip-item" v-for="(tipItem,tipIndex) in item.tags" :key="tipIndex" :class="getColors(tipIndex)">
            <img class="goods-tip-img" :src="tipItem.tagIcon"/>
          </div>
        </template>
        <template v-if="itemHover">
          <div class="goods-tip-item" v-for="(tipItem,tipIndex) in item.tags" :key="tipIndex" :class="getColors(tipIndex)">{{tipItem.tagName}}</div>
        </template>
      </div>
    </div>
    <!-- 商品名称 -->
    <p class="goods-name">{{item.skuName}}</p>
    <!-- 价格 折扣 佣金 -->
    <div class="goods-price">
      <div class="goods-price-item">
        <div class="goods-price-item-box">
          <p class="goods-price-item-tips">￥</p>
          <p class="goods-price-item-value">{{item.ratePrice}}</p>
        </div>
        <div class="goods-price-item-name2">
          ￥{{item.price}}
          <!-- <div class="goods-price-old-line"></div> -->
        </div>
      </div>
      <div class="goods-price-line"></div>
      <div class="goods-price-item">
        <div class="goods-price-item-box">
          <p class="goods-price-item-value">{{item.disCount}}</p>
          <p class="goods-price-item-tips">折</p>
        </div>
        <div class="goods-price-item-name">折扣</div>
      </div>
      <!-- <div class="goods-price-line"></div> -->
      <!-- <div class="goods-price-item">
        <div class="goods-price-item-box">
          <p class="goods-price-item-tips">￥</p>
          <p class="goods-price-item-value">{{item.commission}}</p>
        </div>
        <div class="goods-price-item-name">佣金</div>
      </div> -->
    </div>
    <!-- 月销 -->
    <div class="goods-sales">
      <p class="goods-sales-text">月销</p>
      <p class="goods-sales-text2">{{item.monthSales}}</p>
      <p class="goods-sales-text">库存</p>
      <p class="goods-sales-text2">{{item.skuStock}}</p>
      <div class="presell" v-if="item.advance ==='1' && item.advanceTime > item.systemTime">预售中</div>
      <div class="rush-purchase"  v-if="item.advance ==='0' || (item.advance=='1' && Number(item.advanceTime) <= item.systemTime)"  @click="toPayment(item.id)">立即抢购</div>
    </div>
    <!-- 倒计时 -->
    <!--预售中为1,并且预售时间大于当前时间   立即抢购 1: 为0   2: 当为1的时候，预售时间小于等于当前时间  -->
    <div class="count-down" v-if="item.advance ==='1' && item.advanceTime>item.systemTime">距离开始: <span v-show="d>0">{{d}}天</span> <span  v-show="h>0">{{h}}时</span> <span  v-show="m>0">{{m}}分</span> {{s}}秒</div>
  </div>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      itemHover: false,
      d:"",
      h: "",
      m: "",
      s: "",
      timer:null,
    }
  },
  computed: {
    getColors() {
      return function(index){
        let type = index % 4
        return {
          'goods-tip-bg1' : type === 0,
          'goods-tip-bg2' : type === 1,
          'goods-tip-bg3' : type === 2,
          'goods-tip-bg4' : type === 3
        }
      }
    },
  },
  methods: {
    enter() {
      this.itemHover = true
    },
    leave() {
      this.itemHover = false
    },
    jump(id){
      const {href} = this.$router.resolve({
        path:'/goodsDetail',
        query:{id:id}
      })
      window.open(href,'_blank')
    },
    countTime(){
      // this.countDown(this.item.advanceTime, this.item.createTime)
      this.countDown(this.item.advanceTime, this.item.systemTime)
    },
    // 倒计时
    countDown(end,start){
      // const now = Date.parse(new Date());
      // 做判断当倒计时结束时都为0
      let now = start + 1000;
      if (now >= end) {
        this.d = 0;
        this.h = 0;
        this.m = 0;
        this.s = 0;
        return;
      }
      // 用结束时间减去当前时间获得倒计时时间戳
      const msec = end - now;
      let d = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
      let h = parseInt((msec / 1000 / 60 / 60) % 24); //算出小时数 60*60*1000
      let m = parseInt((msec / 1000 / 60) % 60); //算出分钟数 1*60
      let s = parseInt((msec / 1000) % 60); //算出秒数  一分钟60秒
      //给数据赋值
      this.d = d;
      this.h = h > 9 ? h : "0" + h;
      this.m = m > 9 ? m : "0" + m;
      this.s = s > 9 ? s : "0" + s;
      this.timer = setTimeout(()=>{
        this.countDown(end,now)
      },1000)
    },  
    //去下单
    toPayment(id){
      this.$router.push({
        path:'/placeOrder',
        query:{goodsId:id}
      })
    }
  },
  mounted(){
    this.countTime()
  },
  beforeDestory(){
    clearTimeout(this.timer);
    this.timer = null;
  },
  watch:{
    item(newVal){
      this.lists = newVal
    }
  }
}
</script>

<style scoped>

.goods {
  width: 288px;
  height: 428px;
  background: #fff;
  position:relative;
}
.goods:after{
  content:'';
  width:288px;
}
.goods-top {
  position: relative;
}
.goods-img {
  width: 288px;
  height: 288px;
}
.goods-rt {
  width: 260px;
  height: 38px;
  position: absolute;
  left: 14px;
  bottom: 0;
  background: #0096E6;
  border-radius: 19px 19px 0 0;
  display: flex;
  align-items: center;
}
.goods-rt-item {
  flex: 1;
  font-size: 16px;
  color: #fff;
  height: 38px;
  line-height: 38px;
  text-align: center;
}
.goods-rt-line {
  width: 1px;
  height: 16px;
  background: #fff;
}
.goods-tip {
  position: absolute;
  left: 0;
  top: 0;
  width: 288px;
  height: 288px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.goods-tip-item {
  margin-top: 8px;
  height: 26px;;
  line-height: 26px;
  padding: 0 11px;
  font-size: 14px;
  color: #fff;
  border-radius: 13px 0 0 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
}
.goods-tip-img {
  width: 24px;
  height: 20px;
}
.goods-tip-bg1 {
  background: linear-gradient(to right, #F84141, #FC8142);
}
.goods-tip-bg2 {
  background: linear-gradient(to right, #18A5FC, #475DFC);
}
.goods-tip-bg3 {
  background: linear-gradient(to right, #E751F3, #5F80F7);
}
.goods-tip-bg4 {
  background: linear-gradient(to right, #F36084, #F383DB);
}
.goods-name {
  margin: 4px 12px 0 12px;
  font-size: 14px;
  color: #333;
  height: 44px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods-price {
  margin: 0 14px;
  height: 56px;
  border-bottom:1px dotted #E1E1E1;
  display: flex;
  align-items: center;
}
.goods-price-item {
  flex: 1;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.goods-price-line {
  width: 1px;
  height: 25px;
  background: #E1E1E1;
}
.goods-price-item-box {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.goods-price-item-tips {
  font-size: 14px;
  color: #DE1E1E;
  margin-top: 3px;
}
.goods-price-item-value {
  font-size: 18px;
  color: #DE1E1E;
  font-weight: bold;
}
.goods-price-item-name {
  font-size: 12px;
  color: #666666;
  text-align: center;
}
.goods-price-item-name2 {
  font-size: 14px;
  color: #666666;
  text-align: center;
  position: relative;
  text-decoration:line-through;
}
/* .goods-price-old-line {
  width: 30px;
  height: 2px;
  background: #666;
  position: absolute;
  top: 6px;
  left: 30px;
} */
.goods-sales {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content:space-between;
  margin:0 14px;
  height: 36px;
  line-height: 36px;
}
.goods-sales-text {
  white-space:nowrap;
  font-size: 14px;
  color: #999;
}
.goods-sales-text2 {
  white-space:nowrap;
  font-size: 14px;
  color: #0096E6;
  margin-right: 22px;
  margin-left: 5px;
}
/* 立即抢购 */
.rush-purchase,
.presell{
  width: 76px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ededed;
  color:#999999;
  font-size: 14px;
  user-select:none;
}
.rush-purchase{
  background-color: #e01222;
  color:#ffffff;
  cursor: pointer;
}
.count-down{
  padding:5px 12px;
      display: inline-block;
    background-color: #e01222;
    color: #ffffff;
    font-size: 12px;
    border-radius: 4px;
    letter-spacing: 1px;
    position: absolute;
    top: 11px;
    left: 2px;
}
</style>
